﻿@page "/event-handler"
<h3>停止事件传播</h3>
<div>
    <label>
        <input @bind="stopPropagation" type="checkbox" />
        Stop Propagation
    </label>

    <div class="m-1 p-1 border border-primary" @onclick="OnSelectParentDiv">
        <h3>Parent div</h3>

        <div class="m-1 p-1 border" @onclick="OnSelectChildDiv">
            Child div that doesn't stop propagation when selected.
        </div>

        <div class="m-1 p-1 border" @onclick="OnSelectChildDiv"
             @onclick:stopPropagation="stopPropagation">
            Child div that stops propagation when selected.
        </div>
    </div>

    <p>
        @message
    </p>

    @code {
        private bool stopPropagation = false;
        private string message;

        private void OnSelectParentDiv() =>
            message = $"The parent div was selected. {DateTime.Now}";

        private void OnSelectChildDiv() =>
            message = $"A child div was selected. {DateTime.Now}";
    }
</div>

<h3>聚焦元素</h3>
<div>
    <p>
        <input @ref="exampleInput" />
    </p>

    <button @onclick="ChangeFocus">
        Focus the Input Element
    </button>

    @code {
        private ElementReference exampleInput;

        private async Task ChangeFocus()
        {
            await exampleInput.FocusAsync();
        }
    }
</div>